<!--
 * @Author: ybf
 * @Date: 2023-02-21 15:31:51
 * @LastEditTime: 2023-10-19 10:35:25
 * @Description: 描述
 * Copyright (c) 2023 by 慧能分享, All Rights Reserved.
-->
<template>
    <div class="monthMeter">
        <!-- <nu-col :span="24" style="height:calc(130px - 20px);">
                <nutbTitle title="全月电量"></nutbTitle> -->
        <NuVerifyForm :model="formData" ref="formData" label-width="100px" class="searchForm" @searchForm="searchForm"
            :buttons="fyButtons">
            <NuformItem label="计量点名称" prop="meterName" width="auto">
                <!-- <el-autocomplete v-model="formData.pointName" :fetch-suggestions="querySearchAsync" placeholder="请输入"
                    @select="handleSelect"></el-autocomplete> -->
                <el-select v-model="formData.meterName" filterable placeholder="请输入计量点名称">
                    <el-option v-for="item in restaurants" :key="item.value" :label="item.value" :value="item.value">
                    </el-option>
                </el-select>
            </NuformItem>
            <NuformItem label="电度量名称" prop="pointName" width="auto">
                <nu-input type="text" v-model="formData.pointName" size="middle" placeholder="请输入电度量名称"></nu-input>
            </NuformItem>
            <NuformItem label="日期" prop="date" width="auto">
                <el-date-picker v-model="formData.dataTime" type="month" placeholder="请选择日期" style="width: 100%;"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
            </NuformItem>
            <div class="btnBox">
                <nu-button type="primary" class="searchButton" @click="searchTable">搜索</nu-button>
                <nu-button class="searchButton" @click="clearParams">清除</nu-button>
            </div>
        </NuVerifyForm>
        <div class="line"></div>
        <div style="height:35px;position: relative;padding: 0 10px;" class="renovateTime">
            <!-- <nu-button class="searchButton" @click="callBtn">召唤</nu-button> -->
            <nu-button class="searchButton" @click="exportTable">导出</nu-button>
            <span class="warning_span">当前电量值为增量值（单位:MWH/MVarH）</span>
        </div>
        <!-- </nu-col> -->
        <!-- <nu-col :span="24" style="height: calc(100% - 130px - 20px);">
                <nutbTitle title="点表列表"></nutbTitle> -->
        <NuTableList :showFilter="false" :columns="columns" :dataSource="dataSource" :options="options" border
            :pagination="pagination" @handleSizeChange="handleSizeChange" @handleChangePage="handleChangePage"
            v-if="columns.length">
        </NuTableList>
        <!-- </nu-col> -->
    </div>
</template>

<script>
import nuCol from "@/components/base/col.vue"
import nutbTitle from "@/components/base/tableTitle.vue"
import NuVerifyForm from "@/components/verify-form"
import NuformItem from "@/components/verify-form/form-item.vue"
import nuInput from "@/components/base/input"
import nuSelect from "@/components/base/select"
import nuButton from "@/components/base/button"
import NuTableList from "@/components/tableList/TableFormList"
import { getToken } from "@/utils/auth";
import { getDateTime, getMonthDays, objectToQuery } from "@/utils/ruoyi";
export default {
    name: "diurnalMeter",
    components: { nuCol, nutbTitle, NuVerifyForm, NuformItem, nuInput, nuSelect, nuButton, NuTableList },
    data() {
        return {
            formData: {
                meterName: '',
                pointName: '',
                dataTime: '',
            },
            fyButtons: [],
            pagination: {
                pageSize: 20,
                total: 0,
                pageNum: 1,
            },
            columns: [],
            dataSource: [],
            options: {
                'default-expand-all': true,
                'element-loading-background': 'rgba(225,239,242)',
                'element-loading-text': '数据正在加载中',
                'row-key': 'pid',
                'header-cell-style': {
                    background: 'rgba(105, 159, 209, 0.7)',
                    color: '#fff',
                    fontWeight: 'bold',
                    fontsize: '16px',
                },
                height: 'calc(100vh - 310px)',
                props: {
                    fixed: 'right'
                }
            },
            restaurants: []
        };
    },
    created() {
    },
    mounted() {
        this.formData.dataTime = getDateTime('day');

        this.loadAll();
    },
    methods: {
        /**
         * 查询
         */
        searchTable() {
            this.$refs['formData'].searchForm('form');
        },
        /**
         * form组件内置查询事件
         */
        searchForm(val) {
            if (val) {
                this.getMonthMeterData();
            }
        },
        /**
         * 召唤
         */
        callBtn() {
            let postData = {
                plantId: '793059852510191617',
                meterId: '003',
                day: this.formData.dataTime,
            };
            var reg = /\-/g;
            var res = postData.day.replace(reg, "");
            postData.day = res;
            let str = objectToQuery(postData);

            this.dataSource = [];
            this.$httpGet(window.api.callDayElectricData + str).then(res => {
                // if (res.code == 200) {
                //     this.pagination.total = res.total;
                //     this.dataSource = res.rows;
                // }
            }).catch(err => {

            });
        },
        /**
         * 清除数据
         */
        clearParams() {
            this.resetForm('formData')
        },
        /**
         * 重置表单
         */
        resetForm(formName) {
            this.$refs[formName].resetForm('form');
            for (let k in this[formName]) {
                if (Object.prototype.toString.call(this[formName][k]) == "[object String]") {
                    this[formName][k] = ''
                } else if (Object.prototype.toString.call(this[formName][k]) == "[object Array]") {
                    this[formName][k] = []
                } else if (Object.prototype.toString.call(this[formName][k]) == "[object Number]") {
                    this[formName][k] = ''
                }
            }
        },
        /**
         * 返回输入建议的方法
         * @param {*} queryString
         * @param {*} cb
         */
        querySearchAsync(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                cb(results);
            }, 0);
        },
        /**
         * 过滤数据
         * @param {*} queryString
         */
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        /**
         * 点击选中建议项时触发
         * @param {*} item
         */
        handleSelect(item) {
            console.log(item);
        },
        // 远程搜索数据
        async loadAll() {
            let postData = {
                pageSize: 10000,
                page: 1,
            };
            let data = await this.$httpGet(window.api.getMesaNames, postData).then(res => {
                if (res.code == 200) {
                    return res.mesaNames
                }
            })
            data = await data.map(item => { return { value: item } })
            this.restaurants = data
            // this.formData.meterName = data?.[0]?.value
            this.getMonthMeterData();
        },
        /**
         * 导出
         */
        exportTable() {
            let postData = {
                ...this.formData
            };
            this.getDownload(
                window.api.fullMonthElectricExportFile,
                {
                    ...postData,
                },
                `全月电量.xlsx`
            );
        },
        /**
         * 每页条数变化事件
         */
        handleSizeChange(val) {
            this.pagination.pageNum = 1;
            this.pagination.currentPage = 1;
            this.pagination.pageSize = val;
            this.getMonthMeterData();
        },
        /**
         * 改变分页触发事件
         */
        handleChangePage(val) {
            this.pagination.pageNum = val;
            this.pagination.currentPage = val;
            this.getMonthMeterData();
        },
        /**
         * 设置表格头
         */
        setTableColumns() {
            this.columns = [
                {
                    label: '序号',
                    prop: 'ranking',
                    width: '70px',
                    render: (h, params) => {
                        return h('span', params.index + 1 + (this.pagination.pageNum - 1) * this.pagination.pageSize);
                    },
                    fixed: true
                },
                {
                    label: '计量点名称',
                    width: '150px',
                    prop: 'pointName',
                    fixed: true
                },
                {
                    label: '电度量名称',
                    width: '150px',
                    prop: 'mesaName',
                    fixed: true
                },
               {
                label: '当月电量',
                width: '150px',
                prop: 'totalVal',
                fixed: true
              }
            ]
            Array.from({ length: Number(getMonthDays(this.formData.dataTime)) }, (v, i) => {
                let k = i + 1;
                this.columns.push({
                    label: k + '日',
                    prop: k < 10 ? "v0" + k : "v" + k,
                });
            });
            // console.log(this.columns)
        },
        /**
         * 获取表格数据
         */
        getMonthMeterData() {
            this.columns = []
            this.$nextTick(() => {
                this.setTableColumns()
            })
            let postData = {
                ...this.formData,
                ...this.pagination,
                page: this.pagination.pageNum
            };
            for (let k in postData.query) {
                if (postData.query[k] && Object.prototype.toString.call(postData.query[k]) == '[object String]') {
                    postData.query[k] = postData.query[k].toString().trim();
                }
            }
            this.$httpGet(window.api.getMonthMeter, postData).then(res => {
                if (res.code == 200) {
                    this.pagination.total = res.total;
                    this.dataSource = res.rows;
                    this.diaClose()
                } else {
                }
            }).catch(err => {

            });
        },
    }
};
</script>

<style scoped lang="scss">
.diurnalMeter {
    height: 100%;
}

.searchForm {
    // height: calc(100% - 40px);
    display: flex;
    // align-items: center;
    position: relative;
    flex-wrap: wrap;
    padding-right: 160px;
}

.submitForm {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.btnBox {
    display: flex;
    // float: right;
    z-index: 10;
    position: absolute;
    // top: 15px;
    right: 10px;
    margin: 10px 0 0 0;
}

.dialogHeaderSearch {
    background-color: var(--model-bgc);
    padding: 10px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
}

::v-deep .el-upload {
    width: 100%;

    .el-upload-dragger {
        width: auto;
    }
}

.warning_span {
  font-size: 13px;
  // font-weight: 600;
  color: #F44336;
  margin: 0 10px;
  vertical-align: middle;
}
</style>

